<template>
  <div>
    <h3>示例一、通过对象绑定</h3>
    <div>
      <span v-bind:class="{span:isHide}"> 112312313s</span>
    </div>
    <h3>示例二、与普通class并存</h3>
    <div>
      <span v-bind:class="{span:isHide}" class="span1"> 112312313s</span>
    </div>

    <h3>示例三、通过数组绑定</h3>
    <div>
      <span v-bind:class="[classA,classB]"> 112312313s</span>
    </div>
    <h3>示例四、通过三元表达式</h3>
    <div>
      <span v-bind:class="[isSow? classA:classB]">112312313s</span>
    </div>
    <h3>示例五、内联样式-通过对象绑定</h3>
    <div>
      <span v-bind:style="styleObject">112312313s</span>
    </div>
    <h3>示例六、内联样式-通过数组绑定</h3>
    <div>
      <span v-bind:style="[styleA,styleB]">112312313s</span>
    </div>

    <div>
      <span style="font-size: 30px;"> 112312313s</span>
    </div>
    <div>
      <span class="span"> 112312313s</span>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      isHide: true,

      classA: 'span',
      classB: 'span1',
      isSow: false,
      color: 'red',
      styleObject: {
        "color": 'red',
        "font-size": '30px'
      },

      styleA: {
        "color": 'red',
        "font-size": '30px'
      },
      styleB: {
        "color": 'green',

      }
    }



  }
}
</script>

<style scoped>
.span {
  font-size: 30px;
  color: red;
}

.span1 {
  color: green;
}
</style>